<template>
	<tab-module-container :show-page-tools="true">
		<template #Slot-Conf-Module-Tools-Left>
			<div class="top-search">
				<global-input-search
					v-model:value="tableAttr.searchObj.configName"
					placeholder="配置名称"
					@search="setTableData"
				></global-input-search>
				<a-select
					ref="select"
					v-model:value="tableAttr.searchObj.status"
					class="select-item"
					placeholder="状态"
					allow-clear
					@change="setTableData(true)"
				>
					<a-select-option :key="item.value" v-for="item in configStatus" :value="item.value">{{ item.label }}</a-select-option>
				</a-select>
				<a-select
					v-model:value="tableAttr.searchObj.model"
					class="select-item"
					:class="[tableAttr.searchObj.model && 'ant-select-focused']"
					placeholder="回流策略"
					:options="refluxStrategyList"
					allow-clear
					:show-search="false"
					show-arrow
					@change="setTableData(true)"
				>
				</a-select>
			</div>
		</template>

		<template #Slot-Conf-Module-Tools-Right>
			<a-button v-if="g6Permission.showBtn('add-reflux-config')" type="primary" @click="PageButtonClick('add')"> 新增 </a-button>
		</template>

		<template #Slot-Conf-Module-Content>
			<div class="_table">
				<global-table
					:data-source="tableAttr.data"
					:loading="tableAttr.loading"
					:columns="columns"
					:show-operation="true"
					:use-select="false"
				>
					<template #operation="{ record }">
						<div class="operations">
							<div
								v-if="g6Permission.showBtn('forbidden-reflux-config')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('forbidden', record)"
							>
								<span v-if="record.status === 1">禁用</span>
								<span v-else>启用</span>
							</div>

							<div
								v-if="g6Permission.showBtn('update-reflux-config')"
								:class="[record.status === 1 && 'operation-item-btn-diasbled']"
								class="font-14 operation-item-btn"
								disabled="true"
								@click="PageButtonClick('edit', record)"
							>
								编辑
							</div>

							<div
								v-if="g6Permission.showBtn('delete-reflux-config')"
								class="font-14 operation-item-btn"
								:class="[record.status === 1 && 'operation-item-btn-diasbled']"
								@click="PageButtonClick('delete', record)"
							>
								删除
							</div>
						</div>
					</template>
					<template #device="{ record }">
						<a-tooltip placement="topLeft">
							<template #title>{{ record.device?.deviceNameStr || '' }}</template>
							<p class="font-14 tooltip-default-text">{{ record.device?.deviceNameStr || '' }}</p>
						</a-tooltip>
					</template>
					<template #status="{ record }">
						<div>{{ filterStatus(record.status) }}</div>
					</template>
					<template #model="{ record }">
						<div>{{ filterStrategyList(record.model) }}</div>
					</template>
				</global-table>

				<global-pagination
					:current="tableAttr.current"
					:page-size="tableAttr.pageSize"
					:total="tableAttr.total"
					@change="setTablePagination"
				></global-pagination>
			</div>
		</template>
	</tab-module-container>
</template>

<script lang="ts" setup>
import { g6Permission } from 'glasssix-utils-ts';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { DataRefluxApi } from '../../../api';
import { useDeleteModal } from '@/global-hooks/base.hooks';
import { TabModuleContainer } from '../../../components/index';
const { setOpenDeleteModal } = useDeleteModal();

const router = useRouter();
const $message: any = inject('$message');

const { tableAttr, setTableData, setTablePagination } = g6UseTable(DataRefluxApi.configList);

const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'configName', title: '配置名称', width: 214, ellipsis: true },
	{ dataIndex: 'device', title: '回流设备 ', custom: true, ellipsis: true },
	{ dataIndex: 'status', title: '状态', width: 108, custom: true, ellipsis: true },
	{ dataIndex: 'model', title: '回流策略 ', width: 214, custom: true, ellipsis: true },
	{ dataIndex: 'updatedTime', title: '修改时间', width: 386, ellipsis: true }
];
const configStatus = ref([
	{ label: '启用', value: 1 },
	{ label: '禁用', value: 0 }
]);
const refluxStrategyList = ref([
	{ value: 0, label: '算法报警回流' },
	{ value: 1, label: '录像回流' }
]);

const filterStatus = (value: any) => {
	return configStatus.value.filter((item) => item.value === value)[0]?.label || '';
};
const filterStrategyList = (value: any) => {
	return refluxStrategyList.value.filter((item) => item.value === value)[0]?.label || '';
};
const PageButtonClick = async (type: string, record: Record<string, any> = {}) => {
	console.log(type, record);
	if (type === 'add') {
		router.push('/config-manage/system/reflux-config/add');
		return;
	}
	if (type === 'edit') {
		router.push(`/config-manage/system/reflux-config/update?id=${record.id}`);
		return;
	}
	if (type === 'delete') {
		const deleteFun = async (): Promise<void> => {
			let res: TsRes = await DataRefluxApi.deleteConfig([record.id]);
			if (res.code === 0) {
				tableAttr.data = tableAttr.data.filter((row: Record<string, any>) => row.id !== record.id);
				tableAttr.total = tableAttr.total - 1;
				$message.success('删除成功');
				setTableData();
			}
		};
		const deleteModalInfo = { title: '确认删除该配置？ ', okText: '删除', cancelText: '取消' };
		setOpenDeleteModal(deleteFun, deleteModalInfo);
		return;
	}

	if (type === 'forbidden') {
		tableAttr.loading = true;
		let params = {
			status: record.status === 0 ? 1 : 0,
			model: record.model
		};
		const mergeParams = Object.assign({}, record, params);
		const res: TsRes = await DataRefluxApi.saveConfig(mergeParams);
		tableAttr.loading = false;
		if (res.code === 0) {
			$message.success(`${mergeParams.status === 0 ? '禁用' : '启用'}成功`);
			setTableData(true);
		}
		return;
	}
};

// const sort = (val: any): void => {
// 	console.log('排序：', val);
// 	tableAttr.searchObj.timeSort = val.order;
// 	setTableData(true);
// };

onMounted(() => {
	setTableData(true);
});

// 排序
</script>

<style lang="less" scoped>
._table {
	display: flex;
	height: calc(100vh - 76px - 44px - 180px);
	padding: 20px 0 0;
	flex-direction: column;
	justify-content: space-between;
}

.top-search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;

	.select-item {
		width: 216px;
	}
}

.operation-item-btn-diasbled {
	opacity: 0.5;
	pointer-events: none;
}
</style>
